<template>
  <div class="phone">

      <div class="me-phone">
        <div class="current">当前手机号码
        </div>
        <div class="number">{{phone}}
        </div>
      </div>

      <div class="me-input">
          <div class="clearFix new">
              <input type="text" name="phone" placeholder="请输入新的手机号" v-model="newPhone" class="fl"/>
              <input type="button" :value="vsecond" class="fr btn1 btn" @click="sendcodeFn" :disabled="disabled"  />
          </div>
          <div class="clearFix new">
              <input type="text" name="phone" placeholder="请输入您收到的验证码" v-model="verify" class="fl"/>
          </div>


      </div>

  <div class="next-btn">
    <mt-button type="danger" size="large" v-on:click="changePhone">确认</mt-button>
  </div>




  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
export default {
  name: 'Phone',
  data () {
    return {
      msg: 'message',
      time: 0,
      disabled: false,
      second:60,
      phone:sessionStorage.user && JSON.parse(sessionStorage.user).phone || '',
      newPhone:'',
      vsecond:'获取验证码',
      verify:''
    }
  },
  methods: {

    send: function () {

//      if(this.newPhone == ''){
//
//        Toast('新手机号不能为空。');
//        return;
//      }


      this.disabled = true;
      var vm = this;
      vm.second = 60;
      var timer = null;
      vm.vsecond = vm.second + '秒后重新发送'
      timer = setInterval(function(){
        if(vm.second<=0){
          vm.vsecond = '获取验证码';
          vm.disabled = false;
          clearInterval(timer);
          return;
        }
        vm.second = vm.second - 1;
        vm.vsecond = vm.second + '秒后重新发送'

      },1000)

    },
    sendcodeFn:function(){

      if(this.newPhone == ''){
        Toast('手机号不能为空');
        return;
      }

      if(!utilities.isMobile(this.newPhone)) {
        Toast('请输入正确的手机号');

        return;
      }


      var sendcodeData = {};
      sendcodeData.phone = this.newPhone;
      var _this = this;
      $.ajax({
        type:'post',
        url: RouteMap.sendcode,
        data: sendcodeData,
        success:function(res){
          if(res.code == 200){
            //Toast(res.msg);
            _this.send();
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    changePhone:function(){

      if(this.newPhone == ''){

        Toast('新手机号不能为空。');
        return;
      }
      if(this.verify == ''){

        Toast('验证码不能为空。');
        return;
      }

      var changephoneData = {};
      changephoneData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      changephoneData.phone = this.newPhone;
      changephoneData.verify = this.verify;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.changephone,
        data: changephoneData,
        success:function(res){
          if(res.code == 200){

            sessionStorage.user = '';
            _this.$router.push('/login2');

          }
          else{
            //Toast(res.msg)
          }
        }
      })


    }
  }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .phone{
    padding-top: 2rem;
  }
  .me-phone{
    text-align: center;
    border-bottom: 1px solid #c1c1c1;
    margin: 0 1rem;
    padding-bottom: 0.6rem;
  }
  .me-input{

  }
.me-phone, .me-input{
    background:#fff;
}
.me-phone .number{
  font-size: 1.2rem;
  color: #030303;
}
.me-phone .current{
  font-size: 0.5rem;
  color: #6d6d6d;
}

.me-input{
    padding:.2rem 1rem;
}
.new{
    border-bottom:1px solid #c1c1c1;
    padding:.4rem 0;

}
  .me-input input{
    font-size: 0.5rem;
    background:none;
    outline:none;
    border:0px;
    -webkit-appearance: none;

  }

  .me-input .btn1{
    background:#ef4f4f;
    border:none;
    border-radius: 0.3rem;
    padding: 0 .5rem;
    color: #fff;
}
  .btn1[disabled='disabled'] {
    background: #eee;
    color: #333;
  }
.next-btn{
  padding: 0rem 1rem 0;
}
</style>
